<template> 
  <div class="app-container">
    <el-card class="operate-container" shadow="never" style="margin-top: 10px">
      <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
        <el-form-item label="影片 id：" prop="filmId">
          <el-input
            v-model="listQuery.filmId"
            placeholder="请输入电影id"
            type="number">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleFilmIdChange()"
            size="small">
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
        <el-form-item label="影名：" prop="title">
          <el-input
            v-model="listQuery.title"
            placeholder="请输入电影名模糊查找">
          </el-input>
        </el-form-item>
        <el-form-item label="电影类型：" prop="type">
          <el-select
            v-model="type"
            filterable
            multiple
            placeholder="请选择电影类型">
            <el-option
              v-for="item in types"
              :key="item.name"
              :label="item.name"
              :value="item.name">
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isAdmin()" label="上映状态：" prop="status">
          <el-select
            v-model="status"
            filterable
            multiple
            placeholder="请选择上映状态">
            <el-option
              v-for="item in filmStatusOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value">
              <span style="float: left">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSearchList()"
            size="small">
            筛选
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>影片</span>
      <!--      判断是否是管理员，管理员显示添加按钮-->
      <el-button v-if="isAdmin()" size="mini" class="btn-add" @click="handleAdd()" style="margin-left: 20px">添加
      </el-button>
    </el-card>
    <div class="table-container">
      <el-table ref="filmTable"
                :data="list"
                style="width: 100%;"
                :default-sort="{prop:'filmId'}"
                v-loading="listLoading" border>
        <el-table-column label="影片 id" width="80" align="center" fixed>
          <template slot-scope="scope">{{ scope.row.film.id }}
          </template>
        </el-table-column>
        <el-table-column sortable prop="title" label="影名" align="center" fixed>
          <template slot-scope="scope">{{ scope.row.film.title }}</template>
        </el-table-column>
        <el-table-column sortable prop="type" label="电影类型" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.film.type }}</template>
        </el-table-column>
        <el-table-column sortable prop="status" label="上映状态" width="140" align="center">
          <template slot-scope="scope">{{ scope.row.film.status }}</template>
        </el-table-column>
        <el-table-column sortable prop="releaseDate" label="上映时间" align="center" width="120px">
          <template slot-scope="scope">{{ scope.row.film.releaseDate | formatDateTime }}</template>
        </el-table-column>
        <el-table-column sortable prop="cinema" label="影院" align="center">
          <template slot-scope="scope">{{ scope.row.rowPiece === null ? "未排片" : scope.row.cinema.name }}</template>
        </el-table-column>
        <el-table-column sortable prop="room" label="影厅" align="center">
          <template slot-scope="scope">{{ scope.row.rowPiece === null ? "未排片" : scope.row.room.name }}</template>
        </el-table-column>
        <el-table-column sortable prop="startTime" label="放映时间" align="center" width="180px">
          <template slot-scope="scope">{{ scope.row.rowPiece === null ? "未排片" : scope.row.rowPiece.startTime }}
          </template>
        </el-table-column>
        <el-table-column sortable prop="price" label="单价（￥）" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.rowPiece === null ? "未排片" : scope.row.rowPiece.price }}
          </template>
        </el-table-column>
        <el-table-column sortable prop="remains" label="余票（张）" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.rowPiece === null ? "未排片" : scope.row.rowPiece.remainCapacity }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="text"
                       v-if="!isGuest()"
                       @click="handleOrder(scope.$index, scope.row)">
              购票
            </el-button>
            <el-button size="mini"
                       type="text"
                       v-if="isGuest()"
                       @click="login()">
              登录
            </el-button>
            <el-button size="mini"
                       type="text"
                       v-if="isGuest()"
                       @click="register()">
              注册
            </el-button>
            <!--            验证是否是管理员-->
            <el-button size="mini"
                       type="text"
                       v-if="isAdmin()"
                       @click="handleRowPiece(scope.$index, scope.row)">
              排片
            </el-button>
            <el-button size="mini"
                       type="text"
                       v-if="isAdmin()"
                       @click="handleMaintenance(scope.$index, scope.row)">
              维护
            </el-button>
            <el-button size="mini"
                       type="text"
                       v-if="isAdmin()"
                       @click="toStatistics(scope.$index, scope.row, true)">
              本场收益
            </el-button>
            <el-button size="mini"
                       type="text"
                       v-if="isAdmin()"
                       @click="toStatistics(scope.$index, scope.row, false)">
              本片收益
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog :title="'选座'"
               :visible.sync="seatDialogVisible"
               width="40%"
               id="seats">
      <div class="box">
        <div id="room">
          <div class="row" style="margin-left:25%;">
            <div style="margin-left: 20px;">
              <div class="sit bg-sit"></div>
              <div>可选座位</div>
            </div>
            <div style="margin-left: 20px;">
              <div class="sit bg-sited"></div>
              <div>已售座位</div>
            </div>
            <div style="margin-left: 20px;">
              <div class="sit bg-temp"></div>
              <div>已选座位</div>
            </div>
          </div>
          <div class="row" style="width: 100%;text-align: center;">
						<span>
							银幕中央
						</span>
            <hr style="width: 90%;">
          </div>
          <div v-for="(item,i) in allSeats" class="row" style="margin-left: 15%;">
            <div class="sit bg-nosit" style="margin-right:50px">{{ i + 1 }}</div>
            <div @click="selectSeat(item1,i,j)"
                 :class="['sit',{'bg-temp':item1===3},{'bg-sited':item1===2},{'bg-sit':item1===1},{'bg-nosit':item1===0}]"
                 v-for="(item1,j) in item">
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="seatDialogVisible = false" size="small">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="'下单'"
      :visible.sync="orderDialogVisible"
      width="40%">
      <el-form :model="orderParams"
               :rules="orderRules"
               ref="orderForm"
               label-width="150px" size="small">
        <el-form-item label="手机号" prop="phone">
          <el-input type="number" v-model="orderParams.phone" name="phone" placeholder="请输入手机号" max="11"
                    style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="选择座位" prop="seats">
          <el-button type="primary" @click="handleSelectSeats()" size="small">点击选座</el-button>
          <span>{{ this.orderParams.seats }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleOrderCancel()" size="small">取 消</el-button>
        <el-button type="primary" @click="handleOrderConfirm()" size="small">下单</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="'排片'"
      :visible.sync="rowPieceDialogVisible"
      width="40%">
      <el-form :model="rowPieceParams"
               :rules="rowPieceRules"
               ref="rowPieceForm"
               label-width="150px" size="small">
        <el-form-item label="影院" prop="cinemaId">
          <el-select v-model="rowPieceParams.cinemaId" name="cinemaId" style="width: 250px"
                     @change="handleRowPieceCinemaChange()">
            <el-option v-for="item in cinemaOptions"
                       :key="item.cinema.id"
                       :label="item.cinema.name +' ('+ item.cinema.locationDetail+')'"
                       :value="item.cinema.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影厅" prop="roomId">
          <el-select v-model="rowPieceParams.roomId" name="roomId" style="width: 250px">
            <el-option v-for="item in roomOptions"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker v-model="rowPieceParams.startTime" name="startTime"
                          type="datetime"
                          style="width: 250px"></el-date-picker>
        </el-form-item>
        <el-form-item label="单价" prop="price">
          <el-input-number v-model="rowPieceParams.price" name="price" style="width: 250px"
                           @input="(value)=>{this.rowPieceParams.price=this.toFloatNumber(value)}"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rowPieceDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="isAdd?'影片':'维护'"
      :visible.sync="maintainDialogVisible"
      width="40%">
      <el-form :model="maintainParams"
               :rules="maintainRules"
               ref="maintainForm"
               label-width="150px" size="small">
        <el-form-item label="影名" prop="title">
          <el-input v-model="maintainParams.title" style="width: 250px">
          </el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="maintainParams.type"
                     filterable
                     placeholder="请选择电影类型">
            <el-option
              v-for="item in types"
              :key="item.name"
              :label="item.name"
              :value="item.name">
              <span style="float: left">{{ item.name }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="导演" prop="direction">
          <el-input v-model="maintainParams.direction" style="width: 250px">
          </el-input>
        </el-form-item>
        <el-form-item label="时长（秒）" prop="footage">
          <el-input-number v-model="maintainParams.footage" style="width: 250px"></el-input-number>
        </el-form-item>
        <el-form-item label="评分" prop="rate">
          <el-input v-model="maintainParams.rate" style="width: 250px"
                    @input="(value)=>{this.maintainParams.rate=this.toFloatNumber(value)}">
          </el-input>
        </el-form-item>
        <el-form-item label="参评人数" prop="rateCount">
          <el-input-number v-model="maintainParams.rateCount" style="width: 250px"></el-input-number>
        </el-form-item>
        <el-form-item label="上映状态" prop="status">
          <el-select
            v-model="maintainParams.status"
            filterable
            placeholder="请选择上映状态"
            @change="handleStatusChange">
            <el-option
              v-for="item in filmStatusOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上映时间" prop="releaseDate">
          <el-date-picker v-model="maintainParams.releaseDate"
                          style="width: 250px"></el-date-picker>
        </el-form-item>
        <el-form-item label="上映地区" prop="releaseArea">
          <el-select
            v-model="maintainParams.releaseArea"
            filterable
            placeholder="请选择上映地区">
            <el-option
              v-for="item in releaseAreaOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电影描述" prop="description">
          <el-input type="textarea" rows="8" v-model="maintainParams.description" style="width: 250px">
          </el-input>
        </el-form-item>
        <el-form-item v-if="maintainParams.status!=='已下架' && !isAdd">
          <el-button @click="deleteFilm()" style="width: 100px; color: red">删除该影片</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="maintainDialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleMaintainDialogConfirm()" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {addFilm, updateFilm, releaseFilm, unReleaseFilm, deleteFilm} from '@/api/film';
import {
  filterRowPiecesBy, addRowPiece, updateRowPiece, listAllTypes, listSeatsOfRowPiece,
  listRowPiecesOfFilm, listRowPiecesOfCinema
} from '@/api/filmrowPiece';
import {filterCinemasBy, listRoomsByCinemaId} from '@/api/cinema';
import {addOrder, paidOrder} from '@/api/order';
import {formatDate, str2Date} from '@/utils/date';
import {mapGetters} from "vuex";

const defaultListQuery = {
  cinemaId: null,
  filmId: null,
  title: "",
  types: null,
  statuses: null,
  pageNum: 1,
  pageSize: 10
};
const defaultRowPieceParams = {
  id: null,
  filmId: null,
  cinemaId: null,
  roomId: null,
  startTime: null,
  price: 0
};
const defaultMaintainParams = {
  id: null,
  title: null,
  type: null,
  status: null,
  description: null,
  releaseDate: null,
  releaseArea: null,
  footage: 0,
  rate: 0,
  rateCount: 0,
  direction: null
};
const defaultOrder = {
  idx: 0,
  username: this.username,
  rowPieceId: null,
  price: null,
  seats: null,
  phone: null
};
// 上海
const defaultCinemaListQuery = {
  // locationId: 871,
  locationDetail: "",
  pageNum: 1,
  pageSize: 50
};

export default {
  name: 'index',
  data() {
    return {
      maintainRules: {
        title: [{required: true, trigger: 'blur'}],
        type: [{required: true, trigger: 'blur'}],
        releaseDate: [{required: true, trigger: 'blur'}],
        releaseArea: [{required: true, trigger: 'blur'}],
        footage: [{required: true, trigger: 'blur'}],
      },
      rowPieceRules: {
        filmId: [{required: true, trigger: 'blur'}],
        cinemaId: [{required: true, trigger: 'blur'}],
        startTime: [{required: true, trigger: 'blur'}],
        roomId: [{required: true, trigger: 'blur'}]
      },
      orderRules: {
        phone: [{required: true, trigger: 'blur', message: '请输入手机号'}],
        seats: [{required: true, trigger: 'blur', message: '请选择至少一个位置'}]
      },
      maintainParams: Object.assign({}, defaultMaintainParams),
      listQuery: Object.assign({}, defaultListQuery),
      cinemaListQuery: Object.assign({}, defaultCinemaListQuery),
      rowPieceParams: Object.assign({}, defaultRowPieceParams),
      orderParams: Object.assign({}, defaultOrder),
      filmStatusOptions: [{value: "未上映"}, {value: "已上映"}, {value: "已下架"}],
      cinemaOptions: [],
      roomOptions: [{value: 1}, {value: 2}, {value: 3}, {value: 4}, {value: 5}, {value: 6}, {value: 7}],
      releaseAreaOptions: [{value: "中国大陆"}, {value: "港澳地区"}],
      types: [],
      type: [], // 选择的类型
      status: ["已上映"], // 选择的状态
      list: [],
      total: null,
      listLoading: false,
      rowPieceDialogVisible: false,
      isAdd: true,
      maintainDialogVisible: false,
      orderDialogVisible: false,
      seatDialogVisible: false,
      isEdit: false,
      allSeats: [],
      allSeatIds: [],
      // 已选座位数
      msgCount: 0,
      // 选座信息
      msg: []
    }
  },
  created() {
    if (this.$route.params.cinemaId && this.$route.params.cinemaId !== '') {
      this.listQuery.cinemaId = this.$route.params.cinemaId
      this.handleCinemaIdChange()
    } else {
      this.getList();
    }
    this.getTypes();
  },
  filters: {
    formatDateTime(time) {
      if (time == null || time === '') {
        return '';
      }
      let date = str2Date(time);
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  computed: {
    ...mapGetters([
      'username'
    ])
  },
  methods: {
    // 转换两位小数
    toFloatNumber(value) {
      // 清除"数字"和"."以外的字符
      value = value.replace(/[^\d.]/g, "");
      // 清除开头的"."
      value = value.replace(/^\./g, "");
      // 将超过两位小数以外的数字替换为字符"."
      value = value.replace(/\.{2,}/g, ".");
      // 除了第一个小数点以后，后面的小数点全部替换为空
      value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      // 只能输入两个小数
      value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      // 如果没有小数点，首位不能为类似于 01、02的数字
      if (value.indexOf(".") < 0 && value !== "") {
        if (value.substr(0, 1) === '0' && value.length === 2) {
          value = value.substr(1, value.length);
        }
      }
      return value
    },
    isAdmin() {
      return this.username === 'admin'
    },
    isGuest() {
      return this.username === 'guest'
    },
    login() {
      this.$router.push({path: '/login'})
    },
    register() {
      this.$router.push({path: '/register'})
    },
    handleAdd() {
      this.maintainParams = defaultMaintainParams
      this.maintainDialogVisible = true
      this.isAdd = true
    },
    toStatistics(index, row, isFilm) {
      if (isFilm) {
        this.$router.push({
          name: 'statistics', params: {
            filmId: row.film.id
          }
        });
      } else {
        this.$router.push({
          name: 'statistics', params: {
            rowPieceId: row.rowPiece.id
          }
        });
      }
    },
    handleOrder(index, row) {
      this.orderParams.username = this.username;
      this.orderParams.price = row.rowPiece === null ? 0 : row.rowPiece.price;
      this.orderParams.rowPieceId = row.rowPiece === null ? 0 : row.rowPiece.id
      this.orderParams.seats = this.msg.join(",")
      this.orderParams.idx = index
      this.orderDialogVisible = true;
    },
    handleMaintenance(index, row) {
      this.maintainParams = row.film
      this.maintainParams.releaseDate = str2Date(row.film.releaseDate)
      this.maintainDialogVisible = true
      this.isAdd = false
    },
    handleRowPiece(index, row) {
      this.rowPieceParams.id = row.id
      this.rowPieceParams.filmId = row.film.id
      this.rowPieceParams.cinemaId = row.cinema === null ? null : row.cinema.id
      this.rowPieceParams.roomId = row.rowPiece === null ? null : row.rowPiece.roomId
      this.rowPieceParams.startTime = row.rowPiece === null ? null : str2Date(row.rowPiece.startTime)
      this.rowPieceParams.price = row.rowPiece === null ? null : row.rowPiece.price
      this.rowPieceDialogVisible = true
      this.getCinemaList()
    },
    handleSelectSeats() {
      listSeatsOfRowPiece(this.orderParams.rowPieceId).then(res => {
        this.seatDialogVisible = true;
        this.allSeats = [];
        this.allSeatIds = [];
        let seats = res.data.seats;
        seats.sort(seat => seat.id);
        let r = 0;
        let row = [];
        let rowId = [];
        for (let i = 0; i < seats.length; i++) {
          if (seats[i]['row'] - 1 === r) {
            row.push(seats[i]['status'] === 'BUSY' ? 2 : 1);
            rowId.push(seats[i]['id']);
          } else {
            this.allSeats.push(row);
            this.allSeatIds.push(rowId);
            row = [];
            rowId = [];
            r++;
          }
        }
      })
    },
    handleFilmIdChange() {
      this.listLoading = true;
      listRowPiecesOfFilm(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    handleCinemaIdChange() {
      this.listLoading = true;
      listRowPiecesOfCinema(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    getTypes() {
      listAllTypes().then(res => {
        this.types = res.data
      })
    },
    getList() {
      this.listLoading = true;
      this.listQuery.statuses = this.status.join(",");
      this.listQuery.types = this.type.join(",")
      filterRowPiecesBy(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    getCinemaList() {
      filterCinemasBy(this.cinemaListQuery).then(res => {
        this.cinemaOptions = res.data.list;
        this.handleRowPieceCinemaChange();
      });
    },
    handleRowPieceCinemaChange() {
      if (this.rowPieceParams.cinemaId !== undefined && this.rowPieceParams.cinemaId !== null) {
        listRoomsByCinemaId(this.rowPieceParams.cinemaId).then(res => {
          this.roomOptions = res.data;
        });
      }
    },
    handleDialogConfirm() {
      this.$confirm('确认排片?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        addRowPiece(this.rowPieceParams).then(response => {
          this.$message({
            message: response.data,
            type: 'success'
          });
          this.rowPieceDialogVisible = false;
        }).catch(() => {
          this.rowPieceDialogVisible = false;
        });
      })
    },
    handleMaintainDialogConfirm() {
      this.$confirm('确认?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.maintainParams.releaseDate = formatDate(this.maintainParams.releaseDate, 'yyyy-MM-dd hh:mm:ss');
        if (this.maintainParams.status === '已上映') {

        }
        if (this.isAdd) {
          addFilm(this.maintainParams).then(response => {
            this.$message({
              message: response.data,
              type: 'success'
            });
            this.maintainDialogVisible = false;
          }).catch(() => {
            this.maintainDialogVisible = false;
          });
        } else {
          updateFilm(this.maintainParams).then(response => {
            this.$message({
              message: response.data,
              type: 'success'
            });
            this.maintainDialogVisible = false;
          }).catch(() => {
            this.maintainDialogVisible = false;
          });
        }
      })
    },
    handleOrderConfirm() {
      this.$refs.orderForm.validate(valid => {
        if (valid) {
          addOrder(this.orderParams).then(response => {
            this.$message({
              message: "下单成功",
              type: 'success'
            });
            this.list[this.orderParams.idx].rowPiece.remainCapacity = this.list[this.orderParams.idx].rowPiece.remainCapacity - this.orderParams.seats.split(",").length
            this.orderDialogVisible = false;
            this.$confirm('去付款?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$router.push({name: 'ticket'});
            })
          }).catch(() => {
            this.orderDialogVisible = false;
            this.$message({
              message: "下单失败",
              type: 'error'
            });
          });
        } else {
          this.$message.error('参数验证不合法！');
          return false
        }
      });
    },
    handleOrderCancel() {
      this.orderDialogVisible = false;
      this.allSeatIds = [];
      this.allSeats = [];
      this.orderParams.seats = null;
      this.msg = [];
      this.msgCount = 0;
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleStatusChange(val) {
      if (val === '已上映') {
        this.release();
      } else if (val === '未上映') {
        this.unRelease();
      } else if (val === '已下架') {
        this.deleteFilm();
      }
    },
    release() {
      releaseFilm(this.maintainParams.id).then(res => {
        this.$message({message: "成功上映", type: 'success'})
      }).cata(() => {
        this.$message({message: "上映失败", type: 'error'})
      })
    },
    unRelease() {
      unReleaseFilm(this.maintainParams.id).then(res => {
        this.$message({message: "成功下映", type: 'success'})
      }).cata(() => {
        this.$message({message: "下映失败", type: 'error'})
      })
    },
    deleteFilm() {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteFilm(this.maintainParams.id).then(response => {
          this.$message({
            message: "成功下架",
            type: 'success'
          });
          this.maintainDialogVisible = false;
        }).catch(() => {
          this.maintainDialogVisible = false;
          this.$message({
            message: "下架失败",
            type: 'error'
          });
        });
      })
    },
    // 选座时触发
    selectSeat(data, x, y) {
      if (data === 1 && this.msgCount <= 3) {
        this.$set(this.msg, this.msgCount++, [x, y]);
        this.allSeats[x][y] = 3;
      } else if (data === 3) {
        // 用于记录要删除的座位下标
        let temp = null;
        for (let i = 0; i < this.msg.length; i++) {
          if (this.msg[i][0] === x && this.msg[i][1] === y) {
            temp = i;
            break;
          }
        }
        this.msgCount--;
        this.$delete(this.msg, temp);
        this.allSeats[x][y] = 1;
      } else {
        if (this.msgCount === 4) {
          this.$message({message: "最多只能订4张票！", type: "warning"});
          // alert("最多只能订4张票！")
        }
      }
      let select = [];
      for (let i = 0; i < this.allSeats.length; i++) {
        for (let j = 0; j < this.allSeats[i].length; j++) {
          if (this.allSeats[i][j] === 3) {
            select.push(this.allSeatIds[i][j]);
          }
        }
      }
      this.orderParams.seats = select.join(",");
    },
    // 确认选座时触发
    sub() {
      let x, y;
      for (let i = 0; i < this.msg.length; i++) {
        x = this.msg[i][0];
        y = this.msg[i][1];
        this.$set(this.allSeats, 'x,y', 2);
        this.allSeats[x][y] = 2;
      }
    }
  }
}
</script>
<style>
.sit {
  height: 10px;
  width: 10px;
  min-height: 10px;
  min-width: 10px;
  margin: 4px 4px 4px 4px;
  /*background-size: cover;*/
  border: 1px solid black;
}

/* 座位 */
.bg-sit {
  background-color: grey;
}

.bg-sit:hover {
  cursor: pointer;
}

/* 已售座位 */
.bg-sited {
  background-color: red;
}

/* 空位置 */
.bg-nosit {
  border: 1px solid white;
  width: 20px;
}

/* 已选座位 */
.bg-temp {
  cursor: pointer;
  background-color: green;
}

/* 已选座位号 */
.select-sit {
  border: 2px orange solid;
  border-radius: 20px;
  margin-left: 20px;
  padding: 4px 10px 4px 10px;
  background-color: rgba(255, 0, 0, 0.2);
}

.row {
  /* 清除格式并换行 */
  clear: both;
}

/* 整体容器 */
.box {
  width: 90%;
  margin-left: 5%;
  height: 64%;
}

#room {
  height: 500px;
}

#room div {
  float: left;
}
</style>


